<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1000" @ok="handleSubmit">
    <a-row span="24" style="padding: 10px 6%;">
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">基地名称：<span>*</span></div>
        <a-input v-model:value="formData.name" placeholder="请输入基地名称" required allow-clear />
        <div class="wxts" v-if="errmsg.name">请输入基地名称!</div>
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">产业分类：<span>*</span></div>
        <JTreeSelect v-model:value="formData.classification" dict="t_classification,name,id" pidField="pid"
          pidValue="1661198368030584831" hasChildField="has_child"></JTreeSelect>
        <div class="wxts" v-if="errmsg.classification">请选择产业分类!</div>
      </a-col>

      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">联系人：</div>
        <a-input v-model:value="formData.contactPerson" placeholder="请输入联系人" allow-clear />
      </a-col>
      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">联系电话：</div>
        <a-input v-model:value="formData.contactPhone" placeholder="请输入联系电话" allow-clear />
      </a-col>

      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">基地照片：</div>
        <div class="clearfix">
          <JImageUpload v-model:value="formData.picture" bizPath="null" :fileMax="10" :multiple="true"></JImageUpload>
        </div>
      </a-col>

      <a-col class="tc_item" span="12">
        <div class="tc_item_tit">基地面积：</div>
        <div style="position: relative;">
          <a-input-number v-model:value="formData.area" placeholder="请输入基地面积" addon-after="亩" allow-clear />
          <!-- <span class="jdmj_dw">亩</span> -->
        </div>
      </a-col>

      <a-col class="tc_item" span="24">
        <div class="tc_item_tit">环境描述：</div>
        <a-textarea v-model:value="formData.environment" placeholder="请输入环境描述" :rows="4" allow-clear />
      </a-col>

      <a-col class="tc_item" span="24">
        <div class="tc_item_tit">基地地址：</div>
        <AMap v-model:value="formData.poi" edit="marker" :onlyShow="false" :search="true" zoom="16"></AMap>
      </a-col>
    </a-row>
    <!-- <BasicForm @register="registerForm">
      <template #name="{text}">
        <div v-text="text" style="height: 35px;border: 1px solid red;"></div>
      </template>
</BasicForm> -->
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, unref, watch } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
// import { BasicForm, useForm } from '/@/components/Form/index';
// import { formSchema } from '../TBase.data';
import { saveOrUpdate } from '../TBase.api';
import AMap from '/@/components/AMap/AMap.vue'
import JTreeSelect from '/@/components/Form/src/jeecg/components/JTreeSelect.vue'
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue'

// Emits声明
const emit = defineEmits(['register', 'success']);
const isUpdate = ref(true);

//表单配置
// const [registerForm, { setProps, resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
//   //labelWidth: 150,
//   schemas: formSchema,
//   showActionButtonGroup: false,
//   baseColProps: { span: 24 }
// });

const formData = ref({
  id: '',
  name: '',
  classification: '',
  environment: '',
  picture: '',
  contactPerson: '',
  contactPhone: '',
  area: '',
  poi: '',
  longitude: '',
  latitude: ''
})

const resetFields = () => {
  Object.keys(formData.value).map(key => {
    formData.value[key] = ''
  })
}

const setFieldsValue = (data) => {
  Object.keys(formData.value).map(key => {
    if (data.hasOwnProperty(key)) {
      formData.value[key] = data[key]
    }
  })
}

const getFieldsValue = () => {
  return formData.value;
}

const errmsg = reactive({
  name: false,
  classification: false
})

const validateFields = (data: PropertyKey[]) => {
  return new Promise<void>(function (resolve, reject) {
    let check = false;
    data.map((field: string) => {
      if (formData.hasOwnProperty(field) && formData[field] == '') {
        errmsg[field] = true
        check = true;
      }
    })
    if (check) {
      reject(false);
    } else {
      resolve();
    }
  })
}

//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //重置表单
  resetFields();
  setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
  isUpdate.value = !!data?.isUpdate;
  if (unref(isUpdate)) {
    //表单赋值
    setFieldsValue({
      ...data.record,
      poi: {
        poi: data.record.poi,
        lnglat: [data.record.longitude, data.record.latitude]
      }
    });
  } else {
    if (data.poi) {
      setFieldsValue({
        poi: data.poi
      })
    }
  }
  // 隐藏底部时禁用整个表单
  // setProps({ disabled: !data?.showFooter })
});

//设置标题
const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
//表单提交事件
async function handleSubmit(_v) {
  try {
    await validateFields(['name', 'classification']);
    let values = getFieldsValue();
    if (values.poi) {
      values.longitude = values.poi.lnglat.lng;
      values.latitude = values.poi.lnglat.lat;
      values.poi = values.poi.address
    }
    console.log(values)
    setModalProps({ confirmLoading: true });
    //提交表单
    await saveOrUpdate(values, isUpdate.value);
    //关闭弹窗
    closeModal();
    //刷新列表
    emit('success');
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>

<style lang="less" scoped>
.tc_item_tit {
  font-size: 0.8rem;
}

.ant-input,
.ant-select-selection-search-input,
.ant-input {
  font-size: 1.8rem;
}

.ant-input-affix-wrapper:not(.ant-input-affix-wrapper-textarea-with-clear-btn),
.ant-input-number,
.ant-select-selector {
  border-color: #E5E7EB;
  // border-color: #ff0000;
  border-radius: 4px;
  height: 36px;
  line-height: 36px;
}

.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  border-color: #E5E7EB !important;
  // border-color: #ff0000;
  border-radius: 4px;
  height: 36px !important;
  line-height: 36px;
}

.ant-input {
  border-color: #E5E7EB !important;
}

.jdmj_dw {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  height: 34px;
  line-height: 34px;
  width: 48px;
  text-align: center;
  color: #000 !important;
  background: #FAFAFA;
  border-left: 1px solid #E5E7EB;
  margin-top: 1px;
  margin-right: 1px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.wxts {
  color: #ED6F6F;
  margin-left: 10px;
  font-size: 12px;
  margin-top: 10px;
}

.tc_item {
  margin-bottom: 22px;
  padding: 0px 10px;

  &_tit {
    padding-bottom: 10px;
  }

  span {
    color: #FF4D4F;
  }
}

/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%
}

:deep(.ant-calendar-picker) {
  width: 100%
}

:deep(.ant-input-affix-wrapper-textarea-with-clear-btn textarea.ant-input) {
  padding: 4px 11px;
}
</style>
